/* 
    Document   : design
    Created on : 30 mars 2012, 00:04:27
    Author     : Aymeric
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root { 
    display: block;
}

body {
    background-color: #D3D3D3;
}


/* css concernant la balise header du site c'est-à-dire la bannière du site*/
header{
    width: 600px;
    height: 170px;
    border: 1px solid #000000;
    margin-right: auto;
    margin-left: auto;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
}

/*css pour l'image contenu dans le header*/
header img{
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
}

/* css concernant la balise footer du site c'est-à-dire le pied de page du site*/
footer{
    width: 600px;
    height: 30px;
    border: 1px solid #000000;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    background-color: #ffffff;
}

/******************************************************************************/
/*css concernant la balise menu du site */
nav {
    width: 380px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

nav ul{
    float: left;
    list-style-type: none;
    width: 340px;
    height: 30px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-color: #ffffff;
    -moz-box-shadow: 1px 1px 3px #333;
    -webkit-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
    text-shadow: 0 1px 0 white;
}

nav ul a {
    display: block;
    padding: 5px 10px 15px 10px;
    list-style-type: none;
    float: left;
    color: #454545;
    font-size: 19px;
    text-decoration: none;
}

nav ul a:hover{
    display: block;
    height: 10px;
    list-style-type: none;
    float: left;
    color: #ddd;
    text-shadow: 0 1px 0 black;
    background: #555;
}
/******************************************************************************/
/*css pour la bannière de bienvenue et du plan du site*/
#bienvenue, #plan_site{
    text-align: center;
    font-weight: bold;
    background-color: lightgrey;
    color: #000000;
    margin-top: 32px;
}
/******************************************************************************/
/*css pour le jeu de chifoumi*/
#jeu, #p_site {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    background-color: #ffffff;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
}

#jeu_user, #jeu_computer{
    width: 390px;
    margin-right: 30px;
    margin-left: 30px;
    text-align: center;
    display:inline;
}

#play, #form_replay, #gain{
    display: block;
    text-decoration: none;
    text-align: center;
}

.imgclic:hover{
    color: #ddd;
    text-shadow: 0 1px 0 black;
    background: #555;
    background-position: right top;
}

p{
    text-align: justify;
}


h2{
    text-align: center;
}
/******************************************************************************/
/*css concernant le tableau dynamique des scores*/

#score {
    width:350px;
    margin-right: auto;
    margin-left: auto;
}

table{
    border-collapse:collapse;
}

th{
    background-color: #D0E3FA;
}

th, td, tr {
    border-bottom: 1px solid black;
    width:10%;
    text-align:center;
}

#somme{
    background-color: #ffffff;
    font-weight: bold;
}
/******************************************************************************/
/*CSS de la page règle*/
#navigonglet ul{
    width: 600px;
    list-style-type: none;
}

#navigonglet li{
    margin-right: auto;
    margin-left: auto;
    list-style:none; 
    float:left; 
    display:block;
    padding:0 12px
}

#navigonglet ul a{
    display: block;
    list-style-type: none;
    text-decoration: none;
}

.onglet{
    width: 580px;
    margin-left: 10px;
}

.bouton a {
    margin-left: auto;
    margin-right: auto;
    display:block;
    width:150px;
    line-height:50px;
    text-align: center;
    vertical-align:middle;
    background:url(../img/bouton-noir.png) no-repeat;
    color:white;
    text-decoration:none;
}

.bouton a:hover {
    background:url(../img/bouton-noir-2.png) no-repeat;
}
/******************************************************************************/
/*css qui centre le nom du gagnant*/
#nomGagnant{  
    text-align: center;
}

/*balise article*/
article{
    margin-top: 80px;
}


#doc, #regles{
    width: 600px;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    background-color: #ffffff;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
}


/******************************************************************************/
/*FOOTER*/
/*css de la balise p dans le footer*/
#pied{
    text-align: center;
    margin-top: 10px;
}

/*css qui place les images de validation du code*/
#htmlValide, #cssValide {
    width: 70px;
    margin-top: -10px;
}

